<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/style.css">

    <meta charset="UTF-8" />
    <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>公众号认证测试</title>
</head>
<body>
<h1>公众号认证测试</h1>
<div id="app">
    <div>
        <span>用户信息：</span>
        <span id="userInfo"></span>
    </div>
    <div>
        <button type="button" onclick="gotoLogin()">跳转登录</button>
    </div>
    <div>
        <button type="button" onclick="getQrcImg()">获取二维码</button>
    </div>
    <div>
        <img id="qrcImg" width="100" height="100" src="">
    </div>
    <div id="logContent"></div>
</div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
    // 打印日志
    const logContent = (...data) => {
        console.log(data)
        const element = document.createElement("div")
        element.textContent = JSON.stringify(data)
        document.querySelector("#logContent").appendChild(element)
    }

    try {
        // 获取oauth跳转链接
        window.gotoLogin = () => {
            fetch("/app-api/member/auth/social-auth-redirect?type=31&redirectUri=" + window.location.href)
                .then(response => response.json())
                .then(data => {
                    logContent("跳转接口返回", data)
                    window.location.href = data.data
                })
        }

        // 处理oauth回调
        window.onload = () => {
            logContent("当前url", window.location.href)
            // 获取url中query参数
            const searchParams = new URLSearchParams(window.location.search);
            if (searchParams.get("code") && searchParams.get("state")) {
                // code认证
                fetch("/app-api/member/auth/social-login", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        code: searchParams.get("code"),
                        state: searchParams.get("state"),
                    })
                }).then(response => response.json())
                    .then(data => {
                        logContent("认证接口返回：", data)
                        window.sessionStorage.setItem("accessToken", data.data.accessToken)
                        window.sessionStorage.setItem("tokenInfo", data.data)
                        fetchUserInfo()
                    })
            }
        }

        // 通过token获取用户信息
        const fetchUserInfo = () => {
            fetch("/app-api/member/user/get", {
                method: "GET",
                headers: {
                    "Authorization": `Bearer ${window.sessionStorage.getItem("accessToken")}`
                }
            }).then(response => response.json())
                .then(data => {
                    logContent("用户信息返回", data)
                    document.querySelector("#userInfo").textContent = JSON.stringify(data.data)
                })
        }

        // 获取二维码
        window.getQrcImg = () => {
            fetch("/app-api/member/social-user/wxp-qrcode", {
                method: "GET",
                headers: {
                    "Authorization": `Bearer ${window.sessionStorage.getItem("accessToken")}`
                }
            }).then(response => response.json())
                .then(data => {
                    logContent("获取二维码返回 ", data)
                    document.querySelector("#qrcImg").setAttribute("src", data.data)
                })
        }
    } catch (error) {
        logContent("捕获异常", error)
    }
</script>
</body>
</html>
